<template>
  <div>

    <div class="learing-course">

      <div class="course-cont">
        <div class="course-cont-top-video" style="position: relative;">
          <div class="video-box">
            <div class="top text-center">
              {{coursename}}
            </div>
            <div class="video text-center" style="padding-right: 55px;">
              <div class="video-mine">
                <!--<div class="cls-text"><a class="media" href=".//plugins/js-pdf/NodeJSDeveloperGuid.pdf"></a></div>-->
                <div class="cls-video">
                  <div id="vdplay">

                    <video-player class="vjs-custom-skin" ref="videoPlayer" :options="playerOptions">
                    </video-player>
                  </div>
                  <div class="vdControl">
                    <!--<div class="play" onclick="vdPlay()">播放</div>-->
                  </div>
                </div>
              </div>
            </div>
            <div class="course-nav">
              <div class="nav-stacked text-center">
                <li class="nav"><a :href="url" class="glyphicon glyphicon-list-alt"><span>目录</span></a></li>

              </div>
            </div>
            <div class="navCont">
              <div class="course-weeklist">
                <div class="nav nav-stacked" v-for="teachplan_first in teachplanList">
                  <div class="tit nav-justified text-center">
                    <i class="pull-left glyphicon glyphicon-th-list"></i>
                    {{teachplan_first.pname}}
                    <i class="pull-right"></i>
                  </div>
                  <li v-if="teachplan_first.children!=null"
                      v-for="(teachplan_second, index) in teachplan_first.children">
                    <i class="glyphicon glyphicon-check"></i>
                    <a :href="url" @click="study(teachplan_second.id)">
                      {{teachplan_second.pname}}
                    </a>
                  </li>

                  <!--                <div class="tit nav-justified text-center">-->
                  <!--                  <i class="pull-left glyphicon glyphicon-th-list"></i>-->
                  <!--                  第一章-->
                  <!--                  <i class="pull-right"></i>-->
                  <!--                </div>-->
                  <!--                <li><i class="glyphicon glyphicon-check"></i>-->
                  <!--                  <a :href="url">-->
                  <!--                    第一节-->
                  <!--                  </a>-->
                  <!--                </li>-->
                  <!--                <li><i class="glyphicon glyphicon-unchecked"></i>为什么分为A、B、C部分</li>-->

                </div>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>

<script>
    let sysConfig = require('@/../config/sysConfig')
    import * as courseApi from '../api/course'
    import * as systemApi from '@/base/api/system'
    import utilApi from '../../../common/utils';


    export default {
        components: {},
        data() {
            return {
                userId: '',
                url: '',//当前url
                courseId: '',//课程id
                chapter: '',//章节Id
                coursename: '课程名称',//课程名称
                coursepic: '',//课程图片
                teachplanList: [],//课程计划
                playerOptions: {//播放参数
                    autoplay: false,
                    controls: true,
                    sources: [{
                        type: "application/x-mpegURL",
                        src: ''
                    }]
                },

            }
        },
        methods: {
            //播放视频，启动播放插件
            playvideo(video_src) {
                console.log("视频访问路径" + video_src);
                //设置视频文件路径
                this.playerOptions.sources[0].src = video_src;
                this.playerOptions.autoplay = true
            },
            //开始学习(点击章节访问url，传入参数为叶子节点课程计划id)
            study(chapter) {
                courseApi.get_media(this.courseId, chapter).then((res) => {
                    if (res.success) {
                        //添加用户学习记录
                        if (this.userId != null) {
                            courseApi.add_learning(this.userId, this.courseId, chapter).then((res) => {
                                if (!res.success) {
                                    this.$message.error("保存学习视频进度失败!");
                                }
                            });
                        }
                        //播放文件路径
                        let fileUrl = sysConfig.videoUrl + res.fileUrl;
                        this.playvideo(fileUrl);
                    } else if (res.message) {
                        this.$message.error(res.message);
                    } else {
                        this.$message.error("播放视频失败，请刷新后重试!");
                    }
                }).catch(res => {
                    this.$message.error("播放视频失败，请刷新后重试!");
                });
            },
            //获取第一个课程计划id(若传入课程计划id为空，即第一次进入时，默认播放第一个课程计划视频)
            getFirstTeachplan() {
                for (let i = 0; i < this.teachplanList.length; i++) {
                    let firstTeachplan = this.teachplanList[i];
                    console.log("第" + i + "个节点信息为");
                    console.log(firstTeachplan);
                    //返回第一个有叶子节点的课程计划的叶子节点id
                    if (firstTeachplan.children && firstTeachplan.children.length > 0) {
                        let secondTeachplan = firstTeachplan.children[0];
                        return secondTeachplan.id;
                    }
                }
                return;
            },
            //获得当前登录用户
            refresh_user: function () {
                let activeUser = utilApi.getActiveUser();
                if (activeUser) {
                    this.logined = true;
                    this.userId = activeUser.userid;
                }
            },
        },
        created() {
            //获取当前登录的用户
            this.refresh_user();
            //当前请求的url
            this.url = window.location;
            //课程id
            this.courseId = this.$route.params.courseId;
            //章节id
            this.chapter = this.$route.params.chapter;
            //根据课程id请求后端从索引库中搜索课程发布信息
            systemApi.course_view(this.courseId).then((view_course) => {
                //判断返回的课程map里是否包含当前课程
                if (!view_course || !view_course[this.courseId]) {
                    this.$message.error("获取课程信息失败，请重新进入该页面!");
                    return;
                }
                //从返回的map集合中获取当前课程信息
                let courseInfo = view_course[this.courseId];
                //设置课程名称
                this.coursename = courseInfo.name;
                if (courseInfo.teachplan) {
                    //将课程计划字符串转换为json字符串
                    let teachplan = JSON.parse(courseInfo.teachplan);
                    this.teachplanList = teachplan.children;
                    //若传入课程计划id为空
                    if (!this.chapter || this.chapter == '0') {
                        //获取第一个课程计划id
                        this.chapter = this.getFirstTeachplan();
                        console.log("第一个课程计划id:" + this.chapter);
                        //开始学习(根据课程计划id)
                        this.study(this.chapter);
                    }
                    this.study(this.chapter);

                }
            })
        },
        mounted() {
            // 播放测试
            //this.playvideo('http://video.xuecheng.com/video/hls/lucene.m3u8')
//      this.playvideo("http://video.xuecheng.com/video/5/3/53ac4cca3ddf386c21f4f1cbb4dc9876/hls/53ac4cca3ddf386c21f4f1cbb4dc9876.m3u8")

            $(function () {
                $('.active-box span').click(function () {
                    $(this).css({
                        'color': '#00a4ff'
                    })
                    if ($(this).find('i').hasClass('i-laud')) {
                        $(this).find('.i-laud').css('background-position', '-80px -19px')
                    } else if ($(this).find('i').hasClass('i-coll')) {
                        $(this).find('.i-coll').css('background-position', '1px -75px')
                    }
                })
                $('.learing-box .item-list').mouseover(function (e) {
                    $(this).css({
                        'height': '140px'
                    }).addClass('hov').siblings().css({
                        'height': '50px'
                    })
                    $(this).siblings().removeClass('hov')
                })
                $('.learing-box .item-box').mouseout(function () {
                    $(this).find('.item-list:first').css({
                        'height': '140px'
                    }).addClass('hov')
                    $(this).find('.item-list:first').siblings().css({
                        'height': '50px'
                    }).removeClass('hov')
                })
            })

            $(function () {
                $('.learing-box .item-list').mouseover(function (e) {
                    $(this).css({
                        'height': '140px'
                    }).addClass('hov').siblings().css({
                        'height': '50px'
                    })
                    $(this).siblings().removeClass('hov')
                })
                $('.learing-box .item-box').mouseout(function () {
                    $(this).find('.item-list:first').css({
                        'height': '140px'
                    }).addClass('hov')
                    $(this).find('.item-list:first').siblings().css({
                        'height': '50px'
                    }).removeClass('hov')
                })
            })

            $(function () {
                // 代码点击显示
                $('.item .item-left').click(function () {
                    var pre = $(this).parent()
                    if (!pre.find('pre').hasClass('code-pop')) {
                        pre.find('pre').addClass('code-pop')
                        pre.find('.mask,pre').css('display', 'block')
                    } else {
                        pre.find('pre').removeClass('code-pop')
                        pre.find('.mask,pre').css('display', 'none')
                    }
                })
                // 代码切换
                $('.content-title p a').click(function () {
                    $(this).addClass('all').siblings().removeClass('all')
                })

                $('.learing-box .item-list').mouseover(function (e) {
                    $(this).css({
                        'height': '140px'
                    }).addClass('hov').siblings().css({
                        'height': '50px'
                    })
                    $(this).siblings().removeClass('hov')
                })
                $('.learing-box .item-box').mouseout(function () {
                    $(this).find('.item-list:first').css({
                        'height': '140px'
                    }).addClass('hov')
                    $(this).find('.item-list:first').siblings().css({
                        'height': '50px'
                    }).removeClass('hov')
                })
            })

            $(function () {
                var vidHit = $('html').height() - 0
                var vidCenHit = (vidHit - $('.video-play').height()) / 2
                var vdwt = $('.video').width()
                var wt = 300

                $('.course-cont-top-video,.video').css('height', vidHit)
                $('.video').css('height', vidHit - 50)

                $('.note-cont').css('height', vidHit - $('.note-box .note').height() - 65)

                $(window).resize(function () {
                    $('.course-cont-top-video,.video').css('height', vidHit)
                    $('.video').css('height', vidHit - 50)
//      $('#video-player').height(vidHit - 70);
                    $('.nodte-cont').css('height', vidHit - $('.note-box .note').height() - 65)
                })
                $(window).resize()

                // 还原初始状态-控制器
                function setStart(obj) {
                    if (obj === 'ck') { // 左导航
                        // setnt()
                        // setak()
                        // setcm()
                        setnav()
                    } else if (obj === 'nv') { // 目录
                        setck()
                        // setnt()
                        // setcm()
                        // setak()
                    }
                }

                function setck() {
                    if ($('.video-box .glyphicon-align-justify').hasClass('ck')) {
                        $('.video-box .glyphicon-align-justify').removeClass('ck')
                        $('.video-box').animate({
                            width: '100%'
                        }, 500)
                        $('.course-nav').animate({
                            'right': '0px'
                        }, 0)
                        $('.course-weeklist').animate({
                            left: -wt
                        }, 500)
                    }
                }

                //
                function setnav() {
                    if ($('.course-nav .nav').hasClass('nv')) {
                        $('.course-nav .nav').removeClass('nv')
                        $('.navCont').animate({
                            'width': '0'
                        }, 500)
                        $('.course-nav').animate({
                            'right': '0px'
                        }, 0)
                        $('.video').animate({
                            'width': '100%'
                        }, 500)
                    }
                }


                //
                var reht = $('.video-box .resou-box').height()
                $('.video-box .pull-right').click(function () {
                    if (!$(this).hasClass('ck')) {
                        $(this).addClass('ck')
                        $('.video-box .resources').animate({
                            height: reht
                        }, 500)
                    } else {
                        $(this).removeClass('ck')
                        $('.video-box .resources').animate({
                            height: 0
                        }, 500)
                    }
                })

                // 目录
                $('.course-nav .nav').click(function () {
                    window.location = '#'
                    setStart('nv')
                    if (!$(this).hasClass('nv')) {
                        $(this).addClass('nv')
                        $('.navCont').animate({
                            'width': '300px'
                        }, 500)
                        $('.course-nav').animate({
                            'right': '301px'
                        }, 500)
                        $('.video').animate({
                            'width': vdwt - 280 + 'px'
                        }, 500)
                    } else {
                        $(this).removeClass('nv')
                        $('.navCont').animate({
                            'width': '0'
                        }, 500)
                        $('.course-nav').animate({
                            'right': '0px'
                        }, 500)
                        $('.video').animate({
                            'width': '100%'
                        }, 500)
                    }
                })


//    //video播放器
//    $('.video-mine .cls-text').click(function() {
//
//    })
            })
        }
    }
</script>

<style>
  @import './../../../../static/plugins/normalize-css/normalize.css';
  /*@import './../../../../static/plugins/bootstrap/dist/css/bootstrap.css';*/
  @import './../../../../static/css/page-learing-personal.css';
  @import './../../../../static/css/page-learing-course-videoes.css';
  @import './../../../../static/plugins/rainbow.css';
  /*@import './../../../../static/plugins/videojs/video-js.css';*/
  .playbackView {
    position: relative;
  }

  .optionsWrapper {
    width: 500px;
    margin: 20px auto;
  }

  .video-js {
    position: inherit;
  }

  .learing-course {
    background: #000;
  }

  .nav > li > a {
    position: relative;
    display: unset;
    padding: 10px 15px;
    /*    color: #ebeef5;*/
  }

  /*  .nav > li > a:hover { background-color:#00a4ff; }*/

</style>
